<template>
  <div class="m-theFollowUp">
    <div class="m-dataList">
      <el-table
        :data="dataList"
        style="width: 100%"
        :max-height="800"
        ref="dataList"
      >
        <el-table-column
          prop="date"
          label="房间名称">
        </el-table-column>
        <el-table-column
          prop="date"
          label="课程名称">
          <template slot-scope="scope">
            <a href="javascript:void(0)" @click="details.show = true">{{scope.row.aaa}}</a>
          </template>
        </el-table-column>
        <el-table-column
          prop="date"
          label="课程日期">
        </el-table-column>
        <el-table-column
          prop="date"
          label="直播时段">
        </el-table-column>
        <el-table-column
          prop="name"
          label="加入时间"
          width="120">
        </el-table-column>
        <el-table-column
          prop="province"
          label="退出时间"
          width="120">
        </el-table-column>
        <el-table-column
          prop="city"
          label="禁言时间"
          width="120">
        </el-table-column>
        <el-table-column
          prop="address"
          label="禁言原因"
          width="150">
        </el-table-column>
        <el-table-column
          prop="zip"
          label="在线状态"
          width="120">
        </el-table-column>
        <el-table-column
          prop="zip"
          label="聊天记录"
          width="120">
          <template slot-scope="scope">
            <a href="javascript:void(0)" @click="chats.show = true">详情</a>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="m-pagination">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes=pagination.pageSizeList
        :current-page=pagination.pageNo
        :page-size=pagination.pageSize
        layout="total, sizes, prev, pager, next"
        :total=pagination.total>
      </el-pagination>
    </div>
    <el-dialog title="房间详情" :visible.sync="details.show" width="700px" class="m-dialog"
               :close-on-click-modal="false" :close-on-press-escape="false">
      <el-row class="m-roomDetials">
        <el-col :span='24'>房间名称：</el-col>
        <el-col :span='24'>课程详情：</el-col>

        <el-col :span='8'>课程日期：</el-col>
        <el-col :span='16'>课程名称：</el-col>

        <el-col :span='8'>直播时段：</el-col>
        <el-col :span='16'>直播类型：</el-col>

        <el-col :span='8'>分析师：</el-col>
        <el-col :span='8'>管理员：</el-col>
        <el-col :span='8'>老师助理：</el-col>

        <el-col :span='8'>最高在线人数：</el-col>
        <el-col :span='8'>互动总条数：</el-col>
        <el-col :span='8'>互动总人数：</el-col>

        <el-col :span='8'>@分析师条数：</el-col>
        <el-col :span='8'>@管理员条数：</el-col>
        <el-col :span='8'>私聊助理条数：</el-col>

        <el-col :span='8'>@分析师人数：</el-col>
        <el-col :span='8'>@管理员人数：</el-col>
        <el-col :span='8'>私聊助理人数：</el-col>

        <el-col :span='8'>分析师发言条数：</el-col>
        <el-col :span='8'>@管理员发言条数：</el-col>
        <el-col :span='8'>私聊助理发言条数：</el-col>
      </el-row>
      <div slot="footer" class="dialog-footer">
        <el-button @click="details.show = false" type="primary">关闭</el-button>
      </div>
    </el-dialog>
    <el-dialog title="聊天记录" :visible.sync="chats.show" width="700px" class="m-dialog"
               :close-on-click-modal="false" :close-on-press-escape="false">

    </el-dialog>
  </div>
</template>

<script>
  import * as Utils from '@/utils'
  import * as RealaccountAPI from '@/Api/realaccount'
  export default {
    name: 'TheLiveRoom',
    data () {
      return {
        pagination: Utils.commonPagination(),
        dataList: [],
        details:{
            show:false
        },
        chats:{
            show:false
        }
      }
    },
    components: {},
    methods: {
      handleSizeChange(size) {},
      handleCurrentChange(index) {},
      search(){},
      reset(){},
    }
  }
</script>

<style scoped lang="scss">
  .m-roomDetials {
    .el-col {
      margin-bottom: 10px;
    }
  }
</style>
